import React, { Component, forwardRef } from 'react'
// React.forwardRef

// 函数式组件使用 ref 可以用 forwardRef 将函数组件进行包裹
// 此时函数组件的第一个参数就是 props 第二个参数是 ref
// forwardRef：让函数式组件可以使用 ref 属性
// forwardRef 是一个高阶组件，所谓的高阶组件其实就是一个纯函数，
// 接收一个参数为组件，返回一个新的组件
const Content = forwardRef((props, ref)=>{

    // 接收到 ref 之后，可以将该 ref 添加在标签中
    // 也可以直接给其进行赋值
    ref.current = {
        name: 'asdasda',
        age: 123
    }
    return (<h2 >你好世界 --- {props.title}</h2>)
})

export default class App extends Component {

    contentRef = React.createRef()

  render() {
    return (
      <div>

        <Content title='床前明月光' ref={this.contentRef} />

        <button onClick={()=>{
          
          // 函数式组件 ref 的结果取决于组件内部的处理
          console.log(this.contentRef.current);  

        }}>获取 ref 值</button>

      </div>
    )
  }
}
